<!DOCTYPE HTML>
<html th:with="title='新增珠宝广告',module='/js/app/common/uploadvideo.js'">
<head th:include="fragments/UEheader :: header">
<style type="text/css">
</style>
.hidden {
    display: block; position: absolute; opacity: 0; filter:Alpha(opacity=0);
}
.show {
    position: relative; opacity: 1; filter:Alpha(opacity=1);
}
</head>
<body id="app">
	<div class="page-container">
		<form class="form form-horizontal" id="form">
			<input type="hidden" value="add" name="type">
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					商家名称：
				</label>
				<div class="formControls col-xs-4 col-sm-4">
					<input type="text" class="input-text radius size-L" id="adBusinessName" name="adBusinessName">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					旅游产品名称：
				</label>
				<div class="formControls col-xs-4 col-sm-4">
					<input type="text" class="input-text radius size-L" id="adName" name="adName">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					选择模板：
				</label>
				<div class="formControls col-xs-4 col-sm-3">
					<select class="input-text size-L" id="appTemplate" name="appTemplate">
					</select>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					选择位置：
				</label>
				<div class="formControls col-xs-4 col-sm-3">
					<select class="input-text size-L" id="appTemplateLayout" name="teltemplatelayout" onchange="optionchange('appTemplateLayout')">
						<option>请选择</option>
					</select>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					选择类型：
				</label>
				<div class="formControls col-xs-4 col-sm-3">
					<select class="input-text size-L" id="adsType" name="adsType" onchange="optionchange('adsType')">
						<option>请选择</option>
					</select>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					图片：
				</label>
				<input type="hidden" id="backgroundImg" name="adImage">
				<div class="col-xs-2 col-sm-2 col-xs-offset-4 col-sm-offset-4" style="margin: 0;">
					<div id="uploader-demo">
						<!--用来存放item-->
						<div id="fileList" class="uploader-list"></div>
						<div id="filePicker" class="btn btn-primary size-L radius ">选择图片</div>
					</div>
				</div>
			</div>
			<div class="row cl" v-show="classify">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					商品分类：
				</label>
				<div class="formControls col-xs-4 col-sm-3">
					<select class="input-text size-L" id="adsClassify" name="adsclassify">
						<option>请选择</option>
					</select>
				</div>
			</div>
			<div class="row cl" v-show="product">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					商品：
				</label>
				<div class="formControls col-xs-4 col-sm-3">
					<select class="input-text size-L" id="product" name="product">
						<option>请选择</option>
					</select>
				</div>
			</div>
			<div class="row cl" style="display:none" id="videoDiv">
				<label class="form-label col-xs-4 col-sm-3">视频：</label>
				<input type="hidden" id="video" name="adVideo">
				<div class="col-xs-8 col-sm-8 col-xs-offset-4 col-sm-offset-4" style="margin: 0;">
					<div id="uploader-demo">
						<!--用来存放item-->
						<div id="videoList" class="uploader-list"></div>
						<div id="videoPicker" class="btn btn-primary size-L radius">选择文件</div>
					</div>
				</div>
			</div>
			<div class="row cl" v-show="adurl">
				<label class="form-label col-xs-4 col-sm-3"> 链接： </label>
				<div class="formControls col-xs-4 col-sm-4">
					<input type="text" class="input-text radius size-L" id="adUrl" name="adUrl">
				</div>
			</div>
			<div class="row cl">
				<div class="text-c">
					<input class="btn btn-primary size-L radius mr-10" type="submit" value="提交">
					<input class="btn btn-danger size-L radius" type="button" onclick="closeWin()" value="关闭">
				</div>
			</div>
		</form>
	</div>

	<script type="text/javascript">
		var app = new Vue({
			el : '#app',
			data : {
				classify : false,
				product : false,
				adurl : false,
			}
		});
		function closeWin() {
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		}

		function optionchange(type) {
			if (type == "appTemplateLayout") {
				$("#videoDiv").css("display", "none");
				var appTemplateLayout = $("#appTemplateLayout").val();
				getadsClassify(appTemplateLayout);
				app.classify = false;
				app.product = false;
				app.adurl = false;
			}
			if (type == "adsType") {
				$("#videoDiv").css("display", "none");
				document.getElementById("adsClassify").length = 0;
				$("#adsClassify").append("<option>请选择</option>");
				var adsClassify = $("#adsType").val();
				if (adsClassify != "") {
					app.classify = false;
					app.product = false;
					app.adurl = false;
					if (adsClassify == "0") {
						app.adurl = true;
					}
					if (adsClassify == "1") {
						$("#videoDiv").css("display", "block");
						uploader.refresh();//刷新webupload容器,  ps:webupload 隐藏后再显示会单击失效
					}
					if (adsClassify == "2") {
						app.classify = true;
						queryProductClassify();
					}
					if (adsClassify == "3") {
						app.product = true;
						queryProduct();
					}
				}
			}
		}
		//获取当前布局能投放那些类型的广告
		function getadsClassify(id) {
			var tip = layer.load(0, {
				shade : false
			});
			$.ajax({
				type : "POST",
				url : '/manager/teltemplatelayout/get/' + id,
				beforeSend : function() {
				},
				complete : function() {
					layer.close(tip);
				},
				error : function(request) {
					layer.alert("系统错误");
				},
				success : function(result) {
					if (result.status == 0) {
						var data = result.data;
						if (data.content != "" && data.content != null) {
							document.getElementById("adsType").length = 0;
							$("#adsType").append("<option>请选择</option>");
							var content = data.content.split(",");
							for (var i = 0; i < content.length; i++) {
								if (content[i] == "0") {
									$("#adsType").append("<option value='"+content[i]+"'>网址</option>");
								}
								if (content[i] == "1") {
									$("#adsType").append("<option value='"+content[i]+"'>视频</option>");
								}
								if (content[i] == "2") {
									$("#adsType").append("<option value='"+content[i]+"'>商品分类</option>");
								}
								if (content[i] == "3") {
									$("#adsType").append("<option value='"+content[i]+"'>商品</option>");
								}
							}
						}
					} else {
						sessionCheckTimeOut(result);
					}
				}
			});
		}
		/*
		 * 查询
		 */
		function adsQuery() {
			var tip = layer.load(0, {
				shade : false
			});
			$.ajax({
				type : "POST",
				url : '/manager/appTemplate/findAll',
				data : {
					search_EQ_templateType_templateTypeSn : "007"
				},
				beforeSend : function() {
				},
				complete : function() {
					layer.close(tip);
				},
				error : function(request) {
					layer.alert("系统错误");
				},
				success : function(result) {
					if (result.status == 0) {
						var data = result.data;
						for (var i = 0; i < data.length; i++) {
							$("#appTemplate").append("<option value='"+data[i].id+"'>" + data[i].name + "</option>");
							//如果是第一模板则自动加载模板的布局
							if (i == 0) {
								getTeltemplatelayout(data[i].id);
							}
						}
						if (!$("#appTemplate").val()) {
							layer.alert("暂无对应模板，去添加？", function(index) {
								layer.close(index);
								layer_show('新增模板', '/manager/appTemplate/add', '', '450');
							});
						}
					} else {
						sessionCheckTimeOut(result);
					}
				}
			});
		}
		function getTeltemplatelayout(apptemplateId){
			var tip = layer.load(0, {
				shade : false
			});
			$.ajax({
				type : "POST",
				url : '/manager/teltemplatelayout/findAll',
				data : {
					search_EQ_appTemplate_id : apptemplateId
				},
				beforeSend : function() {
				},
				complete : function() {
					layer.close(tip);
				},
				error : function(request) {
					layer.alert("系统错误");
				},
				success : function(result) {
					if (result.status == 0) {
						var data = result.data;
							for (var i = 0; i < data.length; i++) {
								$("#appTemplateLayout").append("<option value='"+data[i].id+"'>" + data[i].name + "</option>");
							}
					} else {
						sessionCheckTimeOut(result);
					}
				}
			});
		}
		/*
		 * 查询所有商品分类
		 */
		function queryProductClassify() {
			var tip = layer.load(0, {
				shade : false
			});
			$.ajax({
				type : "POST",
				url : '/manager/adsclassify/queryPage',
				data : {
					pageNo : 1,
					pageSize : 500,
					search_EQ_type : "1"
				},
				beforeSend : function() {
				},
				complete : function() {
					layer.close(tip);
				},
				error : function(request) {
					layer.alert("系统错误");
				},
				success : function(result) {
					console.info(result);
					if (result.status == 0) {
						var data = result.data;
						for (var i = 0; i < data.rows.length; i++) {
							$("#adsClassify").append("<option value='"+data.rows[i].id+"'>" + data.rows[i].name + "</option>");
						}
					} else {
						sessionCheckTimeOut(result);
					}
				}
			});
		}
		/*
		 * 查询所有商品
		 */
		function queryProduct() {
			var tip = layer.load(0, {
				shade : false
			});
			$.ajax({
				type : "POST",
				url : '/manager/product/queryPage',
				data : {
					pageNo : 1,
					pageSize : 500
				},
				beforeSend : function() {
				},
				complete : function() {
					layer.close(tip);
				},
				error : function(request) {
					layer.alert("系统错误");
				},
				success : function(result) {
					if (result.status == 0) {
						var data = result.data;
						var data = result.data;
						for (var i = 0; i < data.rows.length; i++) {
							$("#product").append("<option value='"+data.rows[i].id+"'>" + data.rows[i].name + "</option>");
						}
					} else {
						sessionCheckTimeOut(result);
					}
				}
			});
		}
		$(function() {
			adsQuery();
			$("#form").validate({
				rules : {
					adBusinessName : {
						required : true
					},
					adName : {
						required : true
					}
				},
				onkeyup : false,
				focusCleanup : true,
				success : "valid",
				submitHandler : function(form) {
					var data = $('#form').serialize();
					$.ajax({
						type : "POST",
						url : '/manager/ads/save',
						data : data,
						beforeSend : function() {

						},
						complete : function() {
						},
						error : function(request) {
							layer.alert("系统出错！");
						},
						success : function(data) {
							if (data.status == 0) {
								refreshUParentList();
								layer.alert(data.message, function() {
									var index = parent.layer.getFrameIndex(window.name);
									parent.layer.close(index);
								});
							} else {
								layer.alert(data.message);
							}
						}
					});
				}
			});
		});
	</script>
</body>
</html>